<template>
  <div :style="{'width': width + 'px'}">
    <h1 style="text-align: center" v-text="title"></h1>
    <el-form ref="form" :model="formObj">
      <el-form-item
        v-for="(item, idx) in formProps"
        :key="idx"
        :prop="item.prop"
        :label="item.label"
        label-width="88px"
        :rules="{ required: item.required, message: `${item.label}不能为空` }"
      >
        <el-input
          v-if="item.type === 'input'"
          v-model="formObj[item.prop]"
          :placeholder="`请输入${item.label}`"
        ></el-input>
        <el-input
          v-if="item.type === 'password'"
          v-model="formObj[item.prop]"
          :placeholder="`请输入${item.label}`"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item label-width="88px">
        <el-button
          type="primary"
          @click="confirm"
          v-text="confirmLabel"
        ></el-button>
        <el-button @click="cancel" v-text="cancelLabel"></el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "LoginForm",
  props: {
    title: {
      type: String,
      default: "",
    },
    formProps: {
      type: Array,
      default: [],
    },
    confirmLabel: {
      type: String,
      default: "L O G I N",
    },
    cancelLabel: {
      type: String,
      default: "R E S E T",
    },
    width: {
      type: Number,
      default: 400
    }
  },
  data() {
    return {
      formObj: {},
    };
  },
  methods: {
    confirm() {
      this.$refs.form.validate((flag) => {
        if (flag) {
          this.$emit("confirm", this.formObj);
        }
      });
    },
    cancel() {
      this.formObj = {};
      this.$emit("reset");
    },
  },
};
</script>

<style>
</style>